{% block sw_flow_detail %}
<sw-page class="sw-flow-detail">
    {% block sw_flow_detail_header %}
    <template #smart-bar-header>
        <h2>{{ placeholder(flow, 'name', $tc('sw-flow.detail.textHeadline')) }}</h2>
    </template>
    {% endblock %}

    {% block sw_flow_detail_smart_bar_actions %}
    <template #smart-bar-actions>
        {% block sw_flow_detail_smart_bar_actions_save %}
        <sw-button-process
            v-tooltip="{
                message: $tc('sw-privileges.tooltip.warning'),
                disabled: acl.can('flow.editor'),
                position: 'bottom',
                showOnDisabledElements: true
            }"
            class="sw-flow-detail__save"
            variant="primary"
            :is-loading="isLoading"
            :process-success="isSaveSuccessful"
            :disabled="!acl.can('flow.editor')"
            @update:process-success="saveFinish"
            @click.prevent="onSave"
        >
            {{ $tc('global.default.save') }}
        </sw-button-process>
        {% endblock %}
    </template>
    {% endblock %}

    {% block sw_flow_content %}
    <template #content>
        {% block sw_flow_leave_page_modal %}
        <sw-flow-leave-page-modal
            v-if="showLeavePageWarningModal"
            @page-leave-cancel="onLeaveModalClose"
            @page-leave-confirm="onLeaveModalConfirm"
        />
        {% endblock %}

        <sw-card-view :class="{'sw-flow-detail__template': isTemplate }">
            {% block sw_flow_tabs_header %}
            <sw-tabs position-identifier="sw-flow-detail">
                {% block sw_flow_tabs_header_general %}
                <sw-tabs-item
                    class="sw-flow-detail__tab-general"
                    :route="routeDetailTab('general')"
                >
                    {{ $tc('sw-flow.page.tabGeneral') }}
                </sw-tabs-item>
                {% endblock %}

                {% block sw_flow_tabs_header_builder %}
                <sw-tabs-item
                    class="sw-flow-detail__tab-flow"
                    :route="routeDetailTab('flow')"
                >
                    {{ $tc('sw-flow.page.tabFlow') }}
                </sw-tabs-item>
                {% endblock %}

                {% block sw_flow_tabs_header_extension %}{% endblock %}
            </sw-tabs>
            {% endblock %}
            <mt-banner
                v-if="isTemplate"
                variant="attention"
                class="sw-flow-detail__warning"
            >
                {{ $tc('sw-flow.flowNotification.messageWarningSave') }}
            </mt-banner>
            {% block sw_flow_tabs_content %}
            <template v-if="isLoading">
                <sw-skeleton />
                <sw-skeleton />
            </template>

            <template v-else>
                <router-view
                    v-slot="{ Component }"
                >
                    <component
                        :is="Component"
                        :is-loading="isLoading"
                        :is-new-flow="isNewFlow"
                        :is-template="isTemplate"
                        :is-unknown-trigger="isUnknownTrigger"
                    />
                </router-view>
            </template>
            {% endblock %}
        </sw-card-view>

        {% block sw_flow_detail_modal_extension %}{% endblock %}
    </template>
    {% endblock %}
</sw-page>
{% endblock %}
